<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
    <!--不输入内容-->
    <component1>
        <template v-slot:name1 >
            <h2>我是具名插槽1</h2>
        </template>

        <template v-slot:name2 >
            <h2>我是具名插槽2</h2>
            <div><a href="https://www.baidu.com/">百度一下，你就知道</a></div>
        </template>
        <template v-slot:name3 >
            <h2><component2/></h2>
        </template>

        <div slot="name4">
            <h2>我是具名插asdfasdf槽4</h2>
        </div>
    </component1>
</div>

<template id="component1">
    <div>
        <div style="background-color: #b65757">
            <h2>第1个插槽</h2>
            <slot name="name1">第1个插槽</slot>
        </div>
        <div style="background-color: #7c9595">
            <h2>第2个插槽</h2>
            <slot name="name2">第2个插槽</slot>
        </div>
        <div style="background-color: #3a4074">
            <h2>第3个插槽</h2>
            <slot name="name3">第3个插槽</slot>
        </div>
        <div style="background-color: #c180bf">
            <h2>第4个插槽</h2>
            <slot name="name4">第3个插槽</slot>
        </div>
    </div>
</template>
<template id="component2">
    <div style="background-color: #c2d5d5">
        <h3>插槽是组件</h3>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 之前说过，有一些组件是一些通用的布局模板，替换的内容每个都不一样，需要指定替换那个插槽位置，这时候就要给插槽取名来区分
     * 怎么使用在slot元素上使用attribute（属性）：name
     * <slot name="name1"></slot>
     *
     * 怎么把内容放在制定的插槽位置？
     * 使用指令v-slot和template结合
     * <template v-slot:name1 >内容</template>
     *
     * 还有一个就是属性 slot，直接在插入内容元素上用 slot=name
     * 注意的是这种语法开始废用，2.x还支持，3.0之后就不能用了，建议不要用 slot=name来做具名插槽
     * <div slot="name4"></div>
     */
    const app = new Vue({
        el: '#app',
        components: {
            'component1': {
                template: "#component1"
            },
            'component2': {
                template: "#component2"
            }
        }
    })

</script>
</html>